import React, { Component } from 'react'
import {
    Modal, Text, TouchableOpacity, View, StyleSheet
} from 'react-native'
import Style from '../../utils/style/style';
import WXStyle from '../../utils/style/wxstyle';
export default class ConfirmModal extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { visible, title, msg, btnCancelValue, btnConfirmValue } = this.props
        return (
            <Modal animationType="fade" onRequestClose={this.props.Cancel} transparent={true} visible={visible} activeOpacity={0.9}>
                <View style={styles.container}>
                    <View style={styles.modalWrap}>
                        <View style={styles.innerContainer}>
                            {
                                this.props.title ?
                                    <View style={styles.title}>
                                        <Text style={styles.titleTxt}>{title}</Text>
                                    </View> : null
                            }
                            <View style={styles.msg}>
                                <Text style={styles.msgTxt}>{msg}</Text>
                            </View>
                        </View>
                        <View style={styles.btns}>
                            <View style={[styles.btn, styles.borderRight,Style.dfr]}>
                                <TouchableOpacity onPress={this.props.Cancel} style={[styles.btn]} activeOpacity={1}>
                                    <Text style={[Style.f18, Style.color999]}>{btnCancelValue ? btnCancelValue : "取消"}</Text>
                                </TouchableOpacity>
                            </View>
                            <View style={[styles.btn,Style.dfr]}>
                                <TouchableOpacity onPress={this.props.Confirm} style={styles.btn}  activeOpacity={1}>
                                    <Text style={[Style.f18, Style.colorMain]}>{btnConfirmValue ? btnConfirmValue : "确定"}</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center'

    },
    modalWrap: {
        borderRadius: 3,
        backgroundColor: '#fff',
        width: Style.width * 0.8,
        alignItems: 'center',
        justifyContent: 'center'
    },
    innerContainer: {
        paddingLeft: 24,
        paddingRight: 24,
        paddingTop: 20,
    },

    title: {
        alignItems: 'center',
        paddingBottom: 8,
        height: 28,
    },
    titleTxt: {
        fontSize: 16,
        color: '#000'
    },
    msg: {
        alignItems: 'center',
        paddingBottom: 16,
        height: 'auto'
    },
    msgTxt: {
        fontSize: 15,
        color: '#999'
    },
    btns: {
        borderColor: '#e5e5e5',
        borderStyle: 'solid',
        borderTopWidth: 1,
        height: 48,
        width: Style.width * 0.8,
        flexDirection: 'row'
    },
    btn: {
        flex: 1,
        alignItems: 'center',
        justifyContent:'center'
    },
    borderRight: {
        borderColor: '#e5e5e5',
        borderStyle: 'solid',
        borderRightWidth: 1,
    },

})